<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>通讯录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/lay/css/layui.css"/>
</head>

<body>
<input id="contactSearch" type="search" value="" placeholder="搜索">
<button onclick="nodeSearch();">搜索</button>
<ul id="demo"></ul>

<script src="../temp/jquery-3.1.1.min.js"></script>
<script src="layui/layui.js"></script>
<script>
    function nodeSearch() { //搜索节点，可展开到对应节点，无法改变节点图标状态，待完善
        var keyword = $("#contactSearch").val();
        var $root = $("#demo");
        var $objs = $root.find("cite");
        $objs.css('color', '#333');
        if (!keyword) return;
        $objs.filter(":contains('" + keyword + "')").css('color', '#FF0000').parents("ul").not($root).addClass("layui-show");
    }

    layui.use('tree', function () {
        var tree = layui.tree({
            elem: '#demo', //指定元素，生成的树放到哪个元素上
            check: 'checkbox', //勾选风格
            checkboxName: 'contract',//复选框的name属性值
            // checkboxStyle: "",//设置复选框的样式，必须为字符串，css样式怎么写就怎么写
            click: function () { //点击节点回调
            },
            onchange: function () {//当当前input发生变化后所执行的回调
            },
            nodes: [ //节点
                {
                    name: '办公室', //节点名称
                    checkboxValue: 1,//复选框的值
                    children: [
                        {
                            name: '王经理',
                            checkboxValue: 2
                        },
                        {
                            name: '张主任',
                            checkboxValue: 2
                        },
                        {
                            name: '李干事',
                            checkboxValue: 3
                        }
                    ]
                },
                {
                    name: '技术部', //节点名称
                    checkboxValue: 1,//复选框的值
                    children: [
                        {
                            name: '技术一组',
                            checkboxValue: 2,
                            children: [
                                {
                                    name: '小红',
                                    checkboxValue: 2
                                },
                                {
                                    name: '小李',
                                    checkboxValue: 2
                                },
                                {
                                    name: '小王',
                                    checkboxValue: 3
                                }
                            ]
                        },
                        {
                            name: '技术二组',
                            checkboxValue: 2,
                            children: [
                                {
                                    name: '赵武',
                                    checkboxValue: 2
                                },
                                {
                                    name: '王虎',
                                    checkboxValue: 2
                                },
                                {
                                    name: '李四',
                                    checkboxValue: 3
                                }
                            ]
                        },
                        {
                            name: '李干事',
                            checkboxValue: 3
                        }
                    ]
                }
            ]
        });
    });
</script>
</body>
</html>